(() => {
    window.__hulog__el = null;
    const rawObj = {
        init: (elementId) => {
            try {
                const el = document.querySelector(elementId);
                window.__hulog__el = el;
            } catch (error) {}
        },
        log: (logThings) => {
            if (window.__hulog__el) {
                const logStr = window.__hulog__el.innerHTML;
                window.__hulog__el.innerHTML = `${logStr} <br/> ${logThings}`;
            } else {
                const el = document.createElement("div");
                el.style.cssText = `overflow: auto;
                max-height: calc(90vh - 100px);
                position: relative;
                border: 5px solid transparent;
                padding: 5px 20px 5px 5px;
                text-align: justify;
                background-color: #d40202;`;
                const containerEl = document.createElement("div");
                containerEl.id = `hulog${new Date().getTime()}`;
                const style = document.createElement("style");
                const before = document.createTextNode(
                    `#${containerEl.id}:before {    
                      content: "hulog : ";
                      color: transparent;
                      background-image: linear-gradient(360deg, white, #64a4ff, #ffec44);
                      -webkit-background-clip: text;
                      font-weight: bolder;
                      font-size: 20px;
                      line-height: 40px;
                      text-decoration: underline;
                      display: inline-block;
                      border-bottom: 1px solid white;}`
                );
                // debugger;
                style.append(before);
                document.head.append(style);
                //
                const close = document.createElement("div");
                close.style.cssText = `
                  position: absolute;
                  top: 10px;
                  right: 10px;
                  cursor: pointer;
                  user-select: none;
                  display: block;`;
                close.innerText = "清空";
                containerEl.style.cssText = `position: fixed;
                    z-index: 1000;
                    bottom: 10px;
                    left: 10px;    
                    width: 400px;
                    min-height: 100px;
                    color: white;
                    background-color: red;
                    padding: 10px;
                    max-height: 90vh;`;
                const logStr = el.innerHTML;
                el.innerHTML = `${logStr} <br/> ${logThings}`;
                window.__hulog__el = el;
                containerEl.appendChild(el);
                containerEl.appendChild(close);
                document.body.append(containerEl);

                close.addEventListener("click", (e) => {
                    console.log(e);
                    // debugger;
                    rawObj.clear();
                });
            }
        },
        clear: () => {
            // debugger;
            if (window.__hulog__el) {
                // debugger;
                window.__hulog__el.innerHTML = "";
            }
        },
    };

    window.hulog = function (logThings) {
        if (this === window.hulog) {
            Object.assign(this, rawObj);
        }
        if (logThings) {
            rawObj.log(logThings);
        } else {
            return rawObj;
        }
    };
})(window);
